<template>
  <div class="add_task" v-if="show">
    <h2>添加任务</h2>
    <p><input type="text" placeholder="任务标题" v-model="taskTitle" /></p>
    <p><input type="text" placeholder="任务描述" v-model="taskContent" /></p>
    <p>
        
       <input type="datetime-local" placeholder="开始时间" v-model="startTime" :max="deadLine"/> 
    </p>
    <p>
      <input type="datetime-local" placeholder="截止时间" v-model="deadLine" :min="startTime"/>
    </p>
    <label><button class="click_bt" @click="addTask">添加</button></label>
    <label><button class="click_bt" @click="closeAdd">关闭</button></label>
  </div>
</template>

<script>
export default {
  name: "AddTask",
  props: ["show"],
  inject:['reload'],
  data() {
    return {
      taskTitle: "",
      taskContent: "",
      startTime: "",
      deadLine: "",
    };
  },
  methods: {
    closeAdd() {
      this.$emit("update:show", false);
    },
    addTask() {
        if(this.taskTitle == "" ||this.startTime == "" ||this.deadLine == "" ) {
            this.$message.warning("字段为空！")
            return;
            }
      let that = this;
      var url = this.HOME + "/add_task";
      let token = localStorage.getItem("token");
      that
        .$axios({
          method: "post", //指定请求方式
          url: url, //
          data: {
            token: token,
            taskTitle: this.taskTitle,
            taskContent: this.taskContent,
            startTime: this.startTime,
            deadLine: this.deadLine
          },
        })
        .then((res) => {
          if (res["data"]["msg"] == "成功") {
            that.$message.success(res["data"]["msg"])
            //console.log(res["data"]);
            that.reload()
            that.closeAdd()
          }else{
            that.$message(res["data"]["msg"])
          }
          
        });
    },
  },
};
</script>

<style scoped>
.add_task {
  padding: 10px 0 40px 0;
}
.add_task p input {
  width: 75%;
  height: 20px;
  font-size: 15px;
}
.add_task label button {
  font-size: 18px;
  margin: 0 20px;
}
</style>